<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<script type="text/javascript">
	$(function() {
		$("#summary img").each(function() {
			$(this).bind("error", function() {
				$(this).attr("src", "/static/img/error.jpg");
				$(this).css("width", 200);
				$(this).attr("title", "没有图片");
				return false;
			});

			$(this).bind("load", function() {
				var maxWidth = 570; // 图片最大宽度   
				var maxHeight = 285; // 图片最大高度   
				var ratio = 0; // 缩放比例
				//var imgt = new Image(); imgt.src = $(this).attr("src");
				//var width = imgt.width; var height = imgt.height;
				var width = $(this).width(); // 图片实际宽度   
				var height = $(this).height(); // 图片实际高度    

				if (width > maxWidth) { // 检查图片是否超宽
					ratio = maxWidth / width; // 计算缩放比例       
					$(this).css("width", maxWidth); // 设定实际显示宽度       
					height = height * ratio; // 计算等比例缩放后的高度       
					$(this).css("height", height); // 设定等比例缩放后的高度   
				}
				if (height > maxHeight) { // 检查图片是否超高    
					ratio = maxHeight / height; // 计算缩放比例      
					$(this).css("height", maxHeight); // 设定实际显示高度       
					width = width * ratio; // 计算等比例缩放后的高度       
					$(this).css("width", width); // 设定等比例缩放后的高度   
				}
				return false;
			});
		});
	});
</script>

<div id="summary" style="clear: left; margin: 1px 15px 1px 15px;">

	<div class="ui-corner-all"
		style="width: 575px; float: left; margin-left: 5px; background: #F5F5F5;">
		<c:forEach items="${summary}" var="sumry" begin="0" end="8" step="2">
			<div style="margin: 5px 4px 5px 4px; background: white;">
				<h2>
					<a href="/show/article/${sumry.alias}">${sumry.name}</a>
				</h2>
				<p align="center">
					<img src="${sumry.imgurl}" />
				</p>
				<p>${sumry.summary}</p>
			</div>
		</c:forEach>
	</div>

	<div class="ui-corner-all"
		style="width: 575px; float: right; margin-right: 5px; background: #F5F5F5;">
		<c:forEach items="${summary}" var="sumry" begin="1" end="9" step="2">
			<div style="margin: 5px 4px 5px 4px; background: white;">
				<h2>
					<a href="/show/article/${sumry.alias}">${sumry.name}</a>
				</h2>
				<p align="center">
					<img src="${sumry.imgurl}" />
				</p>
				<p>${sumry.summary}</p>
			</div>
		</c:forEach>
	</div>

</div>